<template>
  <div class="timeline">
    <div v-for="(item, idx) in groupList" :key="item.date">
      <div class="date-info">
        <div class="date-sign" :class="{ today: item.isToday }" />
        <div class="date-time">{{ item.dateStr }}</div>
        <div class="date-week">{{ item.weekDay }}</div>
      </div>

      <div class="content-info">
        <SItem
          v-for="schedule in item.list"
          :key="schedule.id"
          :item="schedule"
          :last="idx === groupList.length - 1"
          @delete="handleItemDelete"
          @click="handleItemClick"
          class="content-item"
        >
          <!-- <div class="line" />
          <div class="content">
            <div class="delete-btn">删除</div>
            <div class="content-text">
              {{ schedule.content }}
            </div>
          </div> -->
        </SItem>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import dayjs from 'dayjs'
import SItem from './sItem.vue'
const WEEK_DAYS = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
// 日历组件
const props = defineProps<{
  list: any[]
  currentDate: any // dayjs
}>()

const groupList = computed(() => {
  const ret = []
  const list = props.list.slice()
  const curDateFormat = props.currentDate.format('YYYY-MM-DD')
  if (list.findIndex(item => item.scheduleDate == curDateFormat) < 0) {
    list.push({
      id: 'foo',
      content: 'bar',
      fake: true,
      scheduleDate: curDateFormat
    })
  }
  list.forEach(item => {
    const { scheduleDate } = item
    const group = ret.find(r => r.date == scheduleDate)
    if (!group) {
      const djs = dayjs(scheduleDate)
      ret.push({
        djs: djs,
        date: scheduleDate,
        dateStr: djs.format('MM月DD日'),
        weekDay: WEEK_DAYS[djs.day()],
        isToday: dayjs().isSame(djs, 'day'),
        list: [{ ...item }]
      })
    } else {
      group.list.push({
        ...item
      })
    }
  })
  // 只显示选中那天的
  return ret.filter(r => r.djs.isSame(props.currentDate, 'day'))
  // ret.sort((a, b) => {
  //   return a.djs.isBefore(b.djs, 'day') ? -1 : 1
  // })

  // return ret.filter(r => !r.djs.isBefore(props.currentDate, 'day'))
})

// const groupList = [
//   {
//     date: '8月16日',
//     weekDay: '周三',
//     isToday: true,
//     list: [
//       {
//         id: '1',
//         content: '日程日程日程日程日程日程日程日程日程日程日程日程'
//       },
//       {
//         id: '2',
//         content: '日程日程日程日程日程日程日程日程日程日程日程日程'
//       }
//     ]
//   },
//   {
//     date: '8月20日',
//     weekDay: '周日',
//     isToday: false,
//     list: [
//       {
//         id: '3',
//         content:
//           '日程日程日程日程日日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程日程程日程日程日程日程日程日程日程'
//       },
//       {
//         id: '4',
//         content: '日程日程日程日程日程日程日程日程日程日程日程日程'
//       }
//     ]
//   }
// ]

const emit = defineEmits(['delete', 'item'])
const handleItemDelete = item => {
  emit('delete', item)
}
const handleItemClick = item => {
  emit('item', item)
}
</script>

<style lang="less" scoped>
.timeline {
  font-family: 'PingFang-SC-Medium';
  padding-left: 11px;
  padding-right: 11px;
  padding-top: 9.5px;
  position: relative;
  overflow-y: scroll;
  padding-bottom: 18px;
  .date-info {
    display: flex;
    height: 32px;
    align-items: center;
    .date-time {
      margin-left: 25px;
      font-weight: bold;
      font-size: 16px;
    }
    .date-week {
      font-size: 13px;
      padding-top: 4px;
      margin-left: 4px;
    }
    .date-sign {
      width: 12px;
      height: 12px;
      background: #fff;
      border: 0.5px solid #d9d9d9;
      border-radius: 50%;
      position: absolute;
      //   &::before {
      //     content: '';
      //     width: 1px;
      //     position: absolute;
      //     height: 24px;
      //     left: 5px;
      //     top: -6px;
      //     border-right: 1px dashed #d9d9d9;
      //   }
      &::after {
        content: '';
        width: 6.54px;
        height: 6.54px;
        border-radius: 50%;
        background-color: #3a75c5;
        position: absolute;
        top: 2.73px;
        left: 2.73px;
      }

      &.today {
        &::after {
          content: '今';
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-color: #3a75c5;
          position: absolute;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          line-height: 24px;
          text-align: center;
          left: -6px;
          top: -6px;
        }
      }
    }
  }

  .content-info {
    width: 100%;
    overflow-x: hidden;
  }
}
</style>
